<template>
  <div class="content-wrap">
    <div class="user-info">
      <img
        :src="withdrawal.head_image"
        class="avatar"
      />
      <div class="info">
        {{ withdrawal.phone }}
      </div>
      <!-- <div class="setting">
        <div class="icon"></div>
        <div class="text">设置</div>
      </div> -->
    </div>
    <div class="card">
      <div class="level-ordinary">
        <div class="icon-tx"></div>
        <div class="num-tx">可提现：{{withdrawal.promoter_balance}} 元</div>
        <!-- <div class="buy-vip"></div> -->
      </div>
      <!---->
      <div class="money">
        <div class="item">
          <div class="num">{{withdrawal.all_amount}} 元</div>
          <div class="text">总收入</div>
        </div>
        <div class="item">
          <div class="num">{{withdrawal.already_withdraw}} 元</div>
          <div class="text">已提现</div>
        </div>
        <a href="/my/withdrawal" class="tx">
          <div class="icon-tx"></div>
          <div class="text-tx">提现</div>
        </a>
      </div>
    </div>
    <div data-v-7330b33b="" class="card">
      <div data-v-7330b33b="" class="title">我的服务</div>
      <div data-v-7330b33b="" class="nav">
        <a href="/revenueDetails" data-v-7330b33b="" class="item">
          <div data-v-7330b33b="" class="icon symx"></div>
          <div data-v-7330b33b="" class="text">收益明细</div>
        </a>
        <div @click="handleMyOrder" data-v-7330b33b="" class="item">
          <div data-v-7330b33b="" class="icon wddd"></div>
          <div data-v-7330b33b="" class="text">我的订单</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import FormIndex from "@/components/Form/index.vue";
import FormItem from "@/components/Form/item.vue";
import { ref,onMounted } from "vue";
import { useRouter } from "vue-router";
import request from "@/utils/request.ts";
const formRef = ref();
const name = ref("");
const router = useRouter();
const cardNo = ref("");
import useWithdrawal from '@/hooks/useWithdrawal';
const { withdrawal,viewAccount } = useWithdrawal();
onMounted(()=>{
  viewAccount();
})
const handleMyOrder = ()=>{
  router.push('/my/order/list')
}
</script>

<style lang="scss" scoped>
.content-wrap {
  width: 10rem;
  min-height: 100vh;
  padding-bottom: 3.06667rem;
  padding-bottom: calc(3.06667rem + constant(safe-area-inset-bottom));
  padding-bottom: calc(3.06667rem + env(safe-area-inset-bottom));
  overflow: hidden;
  position: relative;
  background: url(https://cdn.jipaikeji.com/statics/weapp/bg/bg-user.png)
    top/10rem 5.6rem no-repeat;
  background-color: #f5f3f3;
}
.content-wrap .user-info {
  width: 10rem;
  margin-top: 0.4rem;
  margin-left: auto;
  margin-bottom: 0.66667rem;
  margin-right: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.content-wrap .user-info .avatar {
  width: 1.33333rem;
  height: 1.33333rem;
  background-color: #fff;
  border-radius: 0.66667rem;
  margin-left: 0.52rem;
}
.content-wrap .user-info .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0.30667rem;
}
.content-wrap .user-info .info .item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.content-wrap .user-info .info .item .wx {
  font-size: 0.42667rem;
  color: #111;
  font-weight: 700;
}
.content-wrap .user-info .info .item .id {
  font-size: 0.37333rem;
  color: #1e81ff;
  font-weight: 700;
  margin-left: 0.30667rem;
}
.content-wrap .user-info .setting {
  margin-left: auto;
  margin-right: 0.66667rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content-wrap .card {
  width: 9.24rem;
  background-color: #fff;
  border-radius: 0.26667rem;
  overflow: hidden;
  margin: 0.33333rem auto 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.content-wrap .card .level-ordinary {
  width: 8.65333rem;
  height: 1.30667rem;
  margin: 0 auto;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.content-wrap .card .level-ordinary .icon-tx {
  width: 0.48rem;
  height: 0.42667rem;
  margin-left: 0.12rem;
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-user-tx1.png)
    50%/100% no-repeat;
}
.content-wrap .card .level-ordinary .num-tx {
  margin-left: 0.18667rem;
  font-size: 0.34667rem;
  font-weight: 700;
  color: #333;
}
.content-wrap .card .money {
  width: 8.65333rem;
  margin: 0.53333rem auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content-wrap .card .money .item {
  width: 3.33333rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content-wrap .card .money .item .num {
  font-size: 0.45333rem;
  color: #333;
  font-weight: 700;
}
.content-wrap .card .money .item .text {
  font-size: 0.26667rem;
  color: #333;
  font-weight: 500;
  margin-top: 0.12rem;
}
.content-wrap .card .money .tx .icon-tx {
  margin-left: auto;
  margin-right: 0.18rem;
  width: 0.58667rem;
  height: 0.57333rem;
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-user-tx2.png)
    50%/100% no-repeat;
}
.content-wrap .card .money .tx .text-tx {
  margin-left: auto;
  margin-right: 0.18rem;
  font-size: 0.26667rem;
  color: #333;
  font-weight: 500;
  margin-top: 0.2rem;
}
.content-wrap .card .title {
  width: 9.24rem;
  font-size: .42667rem;
  color: #111;
  font-weight: 700;
  margin-top: 0.42667rem;
  margin-left: 0.41333rem;
}
.content-wrap .card .nav {
  width: 9.24rem;
  margin: 0.53333rem auto 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.content-wrap .card .nav .item {
  margin-bottom: 0.42667rem;
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content-wrap .card .nav .item .icon {
  width: 0.96rem;
  height: 0.96rem;
}
.content-wrap .card .wddd {
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-user-wddd.png) 50%/100% no-repeat;
}
.content-wrap .card .symx {
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-user-symx.png) 50%/100% no-repeat;
}
.content-wrap .card .nav .item .text {
  margin-top: 0.29333rem;
  font-size: .29333rem;
  color: #222;
  font-weight: 400;
}
</style>